.avatar-background-layout {
    width           : 100vw;
    height          : 30vh;
    background-color: #65A5D1;
    display         : flex;
    justify-content : center;
}

.avatar-main-layout {
    width          : 95vw;
    height         : 30vh;
    display        : flex;
    justify-content: flex-start;
}

.avatar-img-layout {
    width          : 10vw;
    height         : 30vh;
    display        : flex;
    justify-content: center;
    flex-direction : column;
}

.avatar-title-layout {
    width : 50vw;
    height: 30vh;
}

.avatar {
    width              : 8vw;
    height             : 8vw;
    /* background-color: cornsilk; */
    border-radius      : 4vw;
    /* background-image: url("../img_1088931711.jpg"); */
    background-size    : 100% 100%;
}

.avatar-title {
    width     : 50vw;
    height    : 20vh;
    margin-top: 10vh;
}


.course-background-layout {
    width          : 100%;
    display        : flex;
    justify-content: flex-start;
}

.course-cover-layout {
    width          : 48vh;
    height         : 32vh;
    background-size: 100% 100%;
    margin-right   : 5vw;
}

.course-description-layout {
    width : 40%;
    height: 100%;
}

.course-empty-layout {
    width : 18%;
    height: 100%;
}

.course-progress-layout {
    width     : 20%;
    text-align: center;
}

.title-normal {
    font-size  : 25px;
    font-weight: bold;
    color      : rgb(77, 72, 72);
}

.title-editable {
    font-size  : 25px;
    font-weight: bold;
    color      : rgb(77, 72, 72);
}

.title-editable :focus {
    border-bottom: 2px solid lightskyblue;
}

.title-editable :hover {
    border-bottom: 2px solid lightskyblue;
}